<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>评价详情</title>
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
    <link type="text/css" rel="stylesheet" media="screen" href="__PUBLIC__/app/css/mrs.css"/>
    <link type="text/css" rel="stylesheet" media="screen" href="__PUBLIC__/app/css/media.css"/>
    <script type="text/javascript" src="__PUBLIC__/app/js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
	  $(function(){
	  });
	</script>
	<style>
	#uploadCommentPhoto {
	    width: 100%;
    	height: 100%;
	    filter: alpha(opacity=0);
	    -moz-opacity: .0;
	    opacity: 0.0;
	    cursor: pointer;
	    top: 0;
	    left: 0;
	    bottom: 0;
	    right: 0;
	    position: absolute;
	}
	
	.fontSelectStart{color: #f04877 !important;}
	
	.div_img {
	  position: relative;
	  width: 80px;
	  height: 80px;
	}
	
	.div_img .progress {
		position: absolute;
		bottom: 0;
		z-index: 10;
		left: 0;
		right: 0;
	}
	.progress {
	    height: 10px;
	    overflow: hidden;
	    background-color: #f5f5f5;
	    border-radius: 4px;
	    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
	    box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
	}
	.progress-bar {
	    float: left;
	    width: 0;
	    height: 100%;
	    font-size: 12px;
	    line-height: 10px;
	    color: #fff;
	    text-align: center;
	    background-color: #337ab7;
	    -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
	    box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
	    -webkit-transition: width .6s ease;
	    -o-transition: width .6s ease;
	    transition: width .6s ease;
	}
	.progress.sm, .progress-sm, .progress.sm .progress-bar, .progress-sm .progress-bar {
	    border-radius: 1px;
	}
	.progress-bar.active, .progress.active .progress-bar {
	    -webkit-animation: progress-bar-stripes 2s linear infinite;
	    -o-animation: progress-bar-stripes 2s linear infinite;
	    animation: progress-bar-stripes 2s linear infinite;
	}
	.progress-bar-green, .progress-bar-success {
	    background-color: #00a65a;
	}
	.sr-only {
	    position: absolute;
	    width: 1px;
	    height: 1px;
	    padding: 0;
	    margin: -1px;
	    overflow: hidden;
	    clip: rect(0,0,0,0);
	    border: 0;
	}
	</style>
</head>
<body style="background:#f7f7f9;">
 	<section class="pinjia">
     <div class="mry_two mry_pj">
         <div class="mar_two_head">
             <img src="__PUBLIC__/app/images/pinjia_03.jpg">
             <ul>
                <li>服务项目：<span>{$service.service_name}</span></li>
                <li>服务时长：<span>{$service.service_time}分钟</span></li>
                <li>预约时间：<span>{$order.order_time|date="Y-m-d H:i:s",###}</span></li>
             </ul>
         </div>
         <div class="mar_two_main">
             <img src="__PUBLIC__/app/images/mrydetail_05.png">
             <ul>
                <li><span>{$comment.user_info.mobile}</span><label><for start="0" end="$comment['start']">
				<i></i></for><for start="0" end="5 - $comment['start']"><i class="nonei"></i></for></label></li>
                <li><strong>专业：<span>{$comment.professional}分</span></strong><strong>守时：<span>{$comment.punctuality}分</span></strong><strong>沟通：<span>{$comment.communication}分</span></strong></li>
                <li><p>{$comment.content}</p><dd>{$comment.createtime|date="Y-m-d H:i:s",###}</dd></li>
             </ul>
         </div>
         <div class="pic_pin">
             <ul>
             	<foreach name="comment.photos" item="photo">
                <li><img src="__UPLOADS__/Comment/{$photo.upload_number}/{$photo.img_name}"></li>
                </foreach>
             </ul>
         </div>
         <if condition="!$reply">
         <a class="pj_btn detail_btn">回复</a>
         </if>
      </div>
      <if condition="!$reply">
      <div class="mrs_three">
      	<form action="{:U('Order/reply')}" method="post">
      	<input type="hidden" name="parentid" value="{$comment.id}">
      	<input type="hidden" name="post_id" value="{$order.id}">
      	<input type="hidden" name="uid" value="{$order.beautician_id}">
      	<input type="hidden" name="to_uid" value="{$order.user_id}">
      	<input type="hidden" name="url" value="">
      	<input type="hidden" name="professional" id="professional" value="0">
	    <input type="hidden" name="punctuality" id="punctuality" value="0">
	    <input type="hidden" name="communication" id="communication" value="0">
	    <input type="hidden" name="number" id="number" value="{$number}">
        <textarea name="content" placeholder="服务效果如何，是否严格按流程，利益是否得体（评论至少10个字哦）" ></textarea>
        <div class="pic_add">
             <ul>
                <li>
                	<div style="position: relative;">
                		<img src="__PUBLIC__/app/images/pinjia_05.jpg" >
                		<input type="file" id="uploadCommentPhoto" name="comment_photo" multiple="multiple" style="">
                	</div>
                </li>
             </ul>
        </div>
        <input type="submit" value="提交" class="pj_submit submitForm">
        </form>
      </div>
	</section>
	<script src="__ADMIN__/js/plugins/fileupload/jquery.ui.widget.js"></script>
	<script src="__ADMIN__/js/plugins/fileupload/jquery.iframe-transport.js"></script>
	<script src="__ADMIN__/js/plugins/fileupload/jquery.fileupload.js"></script>
	<script type="text/javascript">
	$(function () {
		$('.submitForm').click(function () {
			$('form').submit();
		});
		$('input[name="url"]').val(window.location.href);
		$("#uploadCommentPhoto").fileupload({
			url: "{:U('/Comment/Index/uploadCommentPhoto')}",
			dropZone: null,
			pasteZone: null,
			autoUpload: true,
			limitConcurrentUploads: 5,
			add: function (e, data) {
				if (e.isDefaultPrevented()) {
	                return false;
	            }
	
	            var html = '';
	            for (var i in data.files) {
	            	html += '<li>'
	              		+'<div class="div_img">'
							+'<div class="progress progress-sm active">'
			                    +'<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 0%">'
			                      +'<span class="sr-only">0%</span>'
			                    +'</div>'
		                  	+'</div>'
	              		+'</div>'
	              	+'</li>';
	            }
	            
	            $('.pic_add li:last').before(html);
            	data.submit();
			},
			formData:{
				num: $('#number').val()
			},//如果需要额外添加参数可以在这里添加  
			done:function(e, result){  
				 var completeElem = $(result.content).parents('li');
		        
		        var data = result.result;
		        var html = '<li>'
	          		+'<input type="hidden" name="comment_photo[]" value="'+data[0].name+'">'
	          		+'<img src="'+data[0].url+'" />'
	          	+'</li>';
	          	
		        completeElem.replaceWith(html);
			},
		    progress: function (e, data) {
		    	var files = data.originalFiles;
		    	var file = data.files [0];
		    	var index;
		    	for (var i in files) {
		    		if (files [i].name == file.name) {
		    			index = i;
		    		}
		    	}
		    	
		    	var $progressElems = $('.pic_add').find('.progress');
		    	var progress = Math.floor(e.delegatedEvent.loaded/e.delegatedEvent.total * 100);
		    	var progressElem = $progressElems.eq(index);
		    	data.content = progressElem;
		    	progressElem.find('.progress-bar').attr('style', 'width:'+progress + '%');
		    }
		});
	});
	</script>
	<else />
      <div class="mrs_addpj">
          <h2>回复</h2>
          <div class="mrs_pjmain">
              <img src="__PUBLIC__/app/images/btylist_01.png">
              <dd><span>{$reply.beautician.name}</span><label>2015-07-03  12:34:23</label></dd>
              <dd>{$reply.beautician.desc}</dd>
          </div>
          <div class="pic_pin">
            <ul>
            	<foreach name="reply.photos" item="photo">
                <li><img src="__UPLOADS__/Comment/{$photo.upload_number}/{$photo.img_name}"></li>
                </foreach>
            </ul>
          </div>
      </div>
	</if>
</body>
</html>